<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>04-饼图制作02</title>
  <!-- 1.引入刚刚下载的 ECharts 文件 -->
  <script src="./echarts/echarts.min.js"></script>
</head>

<body>
  <!-- 2.为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main" style="width: 600px;height:400px;"></div>
  <script>
    //3.创建echarts 实例并渲染
    // 3.1 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.querySelector('#main'));
    // 3.2指定图表的配置项和数据(设置图标样式)
    const datas = [
      ////////////////////////////////////////
      [
        { name: '1万以下', value: 5 },
        { name: '1-1.5万', value: 65 },
        { name: '1.5-2万', value: 35 },
        { name: '2万以上', value: 45 },
      ],
      // ////////////////////////////////////////
      [
        { name: '1万以下', value: 20 },
        { name: '1-1.5万', value: 69 },
        { name: '1.5-2万', value: 30 },
        { name: '2万以上', value: 40 },
      ],
    ];
    const option = {
  //标题
  title:[ 
    {
    text: '男女薪资分布',
    left: '40',
    textStyle: {
      color: '#333',
      fontWeight: 700,
      fontSize: 18
    },
    },
     {
      subtext: '男生',
      left: '50%',
      top: '43%',
      textAlign: 'center',
      subtextStyle: {
      color: '#333',
      fontWeight: 600,
      fontSize: 15
    },
    },
     {
      subtext: '女生',
      left: '50%',
      top: '90%',
      textAlign: 'center',
      subtextStyle: {
      color: '#333',
      fontWeight: 600,
      fontSize: 15
    },
    },
    ],
    //颜色
  color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
  series: datas.map(function (data, idx) {
    var top = idx * 47.3;
    return {
      type: 'pie',
      radius: [40, 60],
      top: top + '%',
      height: '53.33%',
      left: 'center',
      width: 300,
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 0
      },
      //文字
      label: {
        position: 'outer',
        bleedMargin: 15,
        minMargin: 50,
        edgeDistance: 30,
        lineHeight: 30,
        
      },
      labelLine: {
        length: 9,
        length2: 10,
      },
      data: data
    };
  })
};
    // 3.3使用刚指定的配置项和数据显示图表。(渲染图表样式)
    myChart.setOption(option);
  </script>
</body>

</html>